import { inject, observer } from 'mobx-react';
import React from "react";
import EventBus from '@/utils/eventBus';
import Draw from "./draw";
import RectElement from './chart/rect';
import CircleElement from './chart/circle';
import getInstance from './chart/ctx';
@inject("store")
@observer
class CanvasComp extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            elementList: [],
        };
    }
    componentDidMount() {
        // let rect = new RectElement({ x: 100, y: 200, width: 100, height: 100, text: "ddd" });
        // rect.render();
        getInstance().reDraw({ x: 0, y: 0 });
    }
    draw() {
        let circle = new CircleElement({ x: 300, y: 200, r: 50, text: 'red' })
        circle.render();
    }

    render() {
        return <div style={{ display: 'flex' }}>
            <canvas id="canvas" width="600" height="800"></canvas>;
            <button onClick={this.draw.bind(this)}>更新</button>
        </div>
    }
}

export default CanvasComp;
